<template>
  <div>
    <image class="wrapper" :src="img"></image>
    <div class="outer">
        <div class="title">
            <text class="titleText">美丽乡村建设管理平台</text>
        </div>
        <div class="item-box">
            <input class="login-input" type="text" placeholder="用户名" v-model="username">
        </div>
        <div class="item-box">
            <input class="login-input" type="password" placeholder="密码" v-model="password">
        </div>
        <div class="item-box item" @click="onLogin">
            <text class="login-input">登陆</text>
        </div>
    </div>
  </div>
</template>

<script>
import user from './net/user.js'
const defaultImg = 'bmlocal://assets/login.png'
export default {
  name: 'login',
  data () {
    return {
      username: 'admin_beauv',
      password: 'admin_beauv',
      img: defaultImg
    }
  },
  beforeCreate () {
    this.$notice.loading.show()
    this.$nextTick(() => {
      this.$notice.loading.hide()
    })
  },
  methods: {
    onLogin () {
      this.$notice.loading.show()
      user.doLogin(this.username, this.password).then(res => {
        if (res) {
          this.$router.open({
            name: 'home',
            canBack: false
          })
          this.$notice.loading.hide()
        }
      })
    }
  }
}
</script>

<style scoped>
  /* @import '../config/styles.scss'; */

  .wrapper {
    display: block;
    flex: 1;
    align-items: center;
    
  }
  .title {
      margin-top: 302px;
      margin-bottom: 190px;
      width: 750px;
      height: 84px;
      justify-content: center;
      align-items: center;
  }
  .titleText{
      font-size:60px;
      font-family:PingFang-SC-Heavy;
      color:rgba(255,255,255,1);
  }
  .outer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 750px;
    align-items: center;
  }
  .login-font {
    font-size: 34px;
  }
  .item-box {
    width: 558px;
    height: 92px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    border-color: rgba(255,255,255,1);
    border-width: 2px;
    border-style: solid;
    border-radius:44px;
  }
  .item{
      background-color: rgba(39,174,97,1);
      border-color: rgba(39,174,97,1);
      border-width: 2px;
      border-style: solid;
  }
  .login-input {
    width: 550px;
    text-align: center;
    font-size:36px;
    font-family:PingFangSC-Regular;
    color:rgba(255,255,255,1);
  }
</style>
